<template>
    <div>
        <el-card>
            <div slot="header">控制台总览</div>
            <div>您好，{{$store.state.user.username}}
                <el-tag size="small">{{$store.state.user.level.name}}</el-tag>
            </div>
        </el-card>
        <el-card>
            <div slot="header">最新通知
                <el-button type="text" @click="$router.push('/notify')">所有通知</el-button>
                <el-button type="primary"
                           size="small"
                           v-if="$store.state.user.level.id <=2"
                           @click="$router.push('/new_notify')">发新通知
                </el-button>
            </div>
            <el-form v-if="data.notify">
                <el-form-item label="标题">{{data.notify.title}}</el-form-item>
                <el-form-item label="来自">{{data.notify.from.username}}</el-form-item>
                <el-form-item label="时间">{{data.notify.created_at}}</el-form-item>
                <el-form-item label="内容">
                    <pre>{{data.notify.title}}</pre>
                </el-form-item>
            </el-form>
            <div v-else>暂无</div>
        </el-card>
    </div>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                data: {
                    notify: null,
                }
            };
        },
        mounted() {
            this.$http.get('/api/home').then(({data}) => {
                this.data = data;
                if (this.data.notify)
                    this.data.notify.created_at = moment(this.data.notify.created_at).calendar();
            });
        },
    }
</script>

<style scoped>

</style>